<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>微信场景</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="swiper/reset.css">
<link rel="stylesheet" href="swiper/swiper-3.3.1.min.css">
<link rel="stylesheet" href="swiper/animate.min.css">
<style>
	body,html{width:100%;height:100%;}
	.content,.contentbg,.content1,.content2,.content3,.content4,.content5{width:100%;height:100%;position: relative;}
	.content1,.content2,.content3,.content4,.content5{background: #f8f3f7;}
	img{display: block;border: 0;}
	.pack{width:40%;height:28%;position: absolute;left:50%;top:17.3%;margin-left:-20%;}
	.xiu1{width:40%;height:4.3%;position: absolute;left:50%;top:54.3%;margin-left:-20%;}
	.xiu_bott{width:100%;height:12%;position: absolute;left: 0;bottom: 0;}
	
	.banner2{width:100%;height:50.6%;}
	.duolianxi{width:52%;height:5.4%;margin:13% 18.8% 0 28.9%;}
	.zouxiu2{width:53.4%;height:6%;margin:4.3% 0 0 4%}
	.bott2,.bott3,.bott4,.bott5{width:22.2%;height:2%;position: absolute;left:50%;bottom:6.5%;margin-left: -11%;}
	
	.xiajintou3{width:6%;height:12.5%;position: absolute;left:50%;top:8%;margin-left: -3%;}
	.fangshop{width:34.8%;height:32%;position: absolute;left:50%;top:24%;margin-left: -17.3%;}
	.manjian3{width:60%;height:22.8%;position: absolute;left:13%;bottom:13%;}
	
	.zouCouduct{width:36.8%;height:5%;position: absolute;left:50%;top:12.4%;margin-left: -18.4%;}
	.lipin{width:59%;height:32.5%;position: absolute;left:50%;top:26.6%;margin-left: -29.5%;}
	.qianggou{width:44.7%;height:20.5%;position: absolute;left:50%;bottom:16.3%;margin-left: -22.3%;}
	
	.xianjintou5{width:5.8%;height:15.2%;position: absolute;left:50%;top:15.2%;margin-left: -2.8%;}
	.starttxt{width:70%;height:4%;position: absolute;left:50%;top:39.1%;margin-left: -34.7%;}
	.tiyan{width:44.8%;height:10.2%;position: absolute;left:50%;bottom:16.1%;margin-left:-22.3%;}
	
	
	.page{font-size: 40px;color:#fff;margin-bottom: 3.3%;}
	
</style>

</head>
<body>
<div class="swiper-container contentbg">
	<div class="swiper-wrapper content">
		<div class="swiper-slide content1">
			<img src="img/1_center.png" class="ani pack" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/1_txt.png" class="ani xiu1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/1_bottom.png" class="ani xiu_bott" swiper-animate-effect="bounce" swiper-animate-duration="2s" swiper-animate-delay="0">
		</div> 
		<div class="swiper-slide content2">
			<img src="img/2_top.jpg" class="ani banner2" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/2_duo.png" class="ani duolianxi" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/2_zou.png" class="ani zouxiu2" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/2_bott.png" class="ani bott2" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0">
		</div> 
		<div class="swiper-slide content3">
			<img src="img/3_xiajian.png" class="ani xiajintou3" swiper-animate-effect="bounce" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/3_shop.jpg" class="ani fangshop" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/3_man.png" class="ani manjian3" swiper-animate-effect="fadeInRight" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/3_bott.png" class="ani bott3" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0">
		</div> 
		<div class="swiper-slide content4">
			<img src="img/4_txt.png" class="ani zouCouduct" swiper-animate-effect="fadeInDownBig" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/4_center.jpg" class="ani lipin" swiper-animate-effect="tada" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/5_qiang.jpg" class="ani qianggou" swiper-animate-effect="flipInX" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/4_bott.png" class="ani bott4" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0">
		</div> 
		<div class="swiper-slide content5">
			<img src="img/5_top.png" class="ani xianjintou5" swiper-animate-effect="bounce" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/5_txt.png" class="ani starttxt" swiper-animate-effect="zoomInRight" swiper-animate-duration="2s" swiper-animate-delay="0">
			<img src="img/5_butt.jpg" class="ani tiyan" swiper-animate-effect="fadeIn" swiper-animate-duration="2s" swiper-animate-delay="1s">
			<img src="img/5_butt.png" class="ani bott5" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="0">
		</div> 
	</div> 
	<div class="swiper-pagination page"></div>

	
</div>
</body>
<script src="swiper/zepto.js"></script>
<script src="swiper/touch.js"></script>
<script src="swiper/swiper-3.3.1.jquery.min.js"></script>
<script src="swiper/swiper.animate1.0.2.min.js"></script>
<script> 
	function bodyScale(){
		var devicewidth=document.documentElement.clientWidth;
		var scale=devicewidth/640;
		document.body.style.zoom=scale;
	}
	$(".tiyan").on("touchend",function(){
		window.open("denglu.html","_self");
	})
	window.onload=window.onresize=function(){
		bodyScale();
		
	var mySwiper = new Swiper ('.swiper-container', { 
		direction: 'horizontal', 
		
		pagination : '.swiper-pagination',
		paginationType:'fraction',

		onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit 		
			swiperAnimateCache(swiper); //隐藏动画元素 		
			swiperAnimate(swiper); //初始化完成开始动画
		}, 
		onSlideChangeEnd: function(swiper){
			 swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		} 
	})

}
	
</script>
</html>